/*
 * table style
 */
.table {
  width: 100%;
  margin-bottom: @baseLineHeight; // 对齐是排版最重要的因素, 别让什么都居中
  caption, th, td {
    text-align: left;
  }
  caption, th {
    font-weight: 600;
  }
  caption {
    padding: @tablePadding;
    font-size: @tableCaptionFontSize;
  }
// Cells
  th, td {
    padding: @tablePadding;
    line-height: @baseLineHeight;
    vertical-align: middle;
    border-top: 1px solid @tableBorder;
  }

  tr.first td, tr.first th, thead th {
    border-top: 0;
  }
}

// CONDENSED TABLE W/ HALF PADDING
// -------------------------------
.table-condensed {
  th, td {
    padding: @tablePadding/2;
  }
}

// BORDERED
// ----------------
.table-bordered {
  border: 1px solid @tableBorder;
  border-left: 0;

  th, td {
    border-left: 1px solid @tableBorder;
  }
}

// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped
.table tbody tr {
  &.success td {
    background-color: @successBackground;
  }
  &.error td {
    background-color: @errorBackground;
  }
  &.warn td {
    background-color: @warnBackground;
  }
  &.info td {
    background-color: @infoBackground;
  }
}

// ZEBRA-STRIPING
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
  tbody {
    tr.odd td, tr.odd th {
      background-color: @tableBackgroundAccent;
    }
  }
}

// HOVER EFFECT
// ------------
// Placed here since it has to come after the potential zebra striping
.table-hover {
  tbody {
    tr.hover td, tr.hover th {
      background-color: @tableBackgroundHover;
    }
  }
}

// TABLE BACKGROUNDS
// -----------------
// Hover states for .table-hover
.table-hover tbody tr {
  &.success-hover td {
    background-color: darken(@successBackground, 5%);
  }
  &.error-hover td {
    background-color: darken(@errorBackground, 5%);
  }
  &.warn-hover td {
    background-color: darken(@warnBackground, 5%);
  }
  &.info-hover td {
    background-color: darken(@infoBackground, 5%);
  }
}

// TODO gird